import React,{Component} from 'react';
import {Button,Input} from 'antd';
import {Prompt} from 'react-router-dom';
import Editor from 'wrap-md-editor';
import SUBMIT_BLOG from '../request/api';
import './MyEditor.less';
class MyEditor extends Component{
  constructor(props) {
    super(props);
    this.state={
      editor:{}, //用于获取节点
      title:'',  //用于获取
    }
  }
  //获取内容
  getText(){
    // const editor = this.state.editor;
    let {editor, title} = this.state;
    debugger
    let md = editor.getMarkdown();
    let html = editor.getHTML();
    this.submitBlog();
    debugger
  }

  //标题输入框更改
  changeTitle(event){
    debugger
    this.setState({title:event})
  }

  //发送提交请求
  submitBlog(){
    let md = this.state.editor.getMarkdown();
    let title = this.state.title;
    let data = {md,title};
    debugger
    fetch('http://localhost:5002/blog/submit',{
      //请求方式
      method:'POST',
      //将请求的参数转成json
      body:JSON.stringify(data) ,
      //请求头
      headers: {
        'content-type': 'application/json'
      }
      // 请求的返回值
    }).then(function (response) {
      response.json().then(function (data) {
        //获取请求的返回字段
        console.log(data);
        console.log(data.flag);
        console.log(data.message);
        console.log(data.data)
      })
    })
  }
  render() {
    return (
        <div>
          {/*编辑器*/}
          <div className={'my-editor'}>
            <div className={'blog-title'}>
              <Input placeholder='请输入标题' onChange={(event)=>this.changeTitle(event.target.value)} style={{width:'78%',height:'40px',marginLeft:'5%',marginRight:'2%'}}/>
              <Button onClick={()=>this.getText()} style={{width:'10%',height:'40px'}}>
                提交
              </Button>
            </div>
            <Editor config={
              {
                markdown: "",
                onload: (editor, func) => {
                  //将editor挂载到state中,进行管理
                  this.setState({editor});
                  editor.getMarkdown();
                  editor.getHTML();
                }
              }
            }/>
          </div>
          {/*发布选择分区模态框*/}
          {/*检测是否要离开文本编辑器(以后可以做退出保存)*/}
          <Prompt
              when={this}
              message="确定要离开吗?(编辑的内容将不会保存!)"
          />
        </div>


    )
  }
}


export default MyEditor;